<script setup>
import { updateRoleMenuListAsync } from '@/api/roleManagement'
const props = defineProps({
  visible: {
    type: Boolean,
    default: true
  },
  menusInfo: {
    type: Object,
    default: {}
  }
})
const emit = defineEmits(['closeMenusDialog'])
const dialogVisible = computed(() => props.visible)

//菜单信息
const menusList = ref([])
//已有菜单id
const hasMenu = ref({
  halfChecked: [],
  checked: []
})

//组件配置项
const defaultProps = {
  children: 'children',
  label: 'label',
}

//关闭弹窗
const handleClose = () => {
  emit('closeMenusDialog', false)
}

//重置  || 第一次获取数据
const handleReset = () => {
  hasMenu.value = {
    halfChecked: [],
    checked: []
  }
  console.log('%c [  ]-38', 'font-size:13px; background:pink; color:#bf2c9f;', hasMenu.value)
  menusList.value = props.menusInfo.menus.map(item => {
    return {
      id: item.id,
      label: item.title,
      children: item?.subMenus.map(subitem => {
        return {
          id: subitem.id,
          label: subitem.title
        }
      }) || []
    }
  })
  props.menusInfo.menuIds && menusList.value.forEach(item => {

    if (item.children && item.children.length) {
      const childrenLength = item.children.length
      let checkedNum = 0
      //区分勾选和半勾选

      item.children.forEach(subitem => {

        if (props.menusInfo.menuIds.includes(subitem.id)) {
          hasMenu.value.checked.push(subitem.id)
          checkedNum++
        }
      })

      if (childrenLength === checkedNum) {
        hasMenu.value.checked.push(item.id)
      } else {
        hasMenu.value.halfChecked.push(item.id)
      }
    } else {
      props.menusInfo.menuIds.includes(item.id) && hasMenu.value.checked.push(item.id)
    }

  })

}

//保存
const handleUpdate = async () => {
  try {
    const params = {
      roleId: props.menusInfo.roleId,
      menuIds: [...hasMenu.value.checked, ...hasMenu.value.halfChecked]
    }

    const res = await updateRoleMenuListAsync(params)
    if (res && res.code + '' === '200') {
      emit('closeMenusDialog', true)
    }

  } catch (error) {
    console.log('%c [ error ]-84', 'font-size:13px; background:pink; color:#bf2c9f;', error)

  }

}

//复选框勾选
const check = (data, treeState) => {
  hasMenu.value.halfChecked = treeState.halfCheckedKeys
  hasMenu.value.checked = treeState.checkedKeys
}


watch(() => props.menusInfo, () => {
  handleReset()
})
</script>

<template>
  <div class="dialog-container">
    <el-dialog v-model="dialogVisible" title="分配菜单权限" width="700" :before-close="handleClose" align-center
      :close-on-click-modal="false" :close-on-press-escape="false" :center="true" :destroy-on-close="true">


      <el-scrollbar height="400px">
        <el-tree clas="tree" style="max-width: 600px" :data="menusList" show-checkbox node-key="id"
          :default-expand-all="true" :default-checked-keys="hasMenu.checked" :props="defaultProps" @check="check" />
      </el-scrollbar>


      <template #footer>
        <div class="dialog-footer">
          <el-button class="btn-blue" type="primary" @click="handleReset">
            重置
          </el-button>
          <el-button class="btn-green" type="primary" @click="handleUpdate">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>



<style lang="scss" scoped>
.dialog-container {
  .tree {
    height: 50vh;

  }
}

:deep(.el-button) {
  color: #fff;
  width: 100px;
  height: 35px;
  font-size: 16px;
  border-color: #c6c6c6;
}
</style>